<template>
    <div class="chaxun">
        <div class="cx-select">
            <div class="flex" style="flex:0 0 20%;margin-bottom:1rem;">
                <i class="iconfont icon-saoyisao" style="font-size:30px;" @click="scanNfc()"></i>
            </div>
            <div class="flex" style="flex:0 0 80%">
                <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="equipName" @change="selectName">
                </el-input>
            </div>
            <div class="flex" style="flex:0 0 20%" v-if="$route.query.type==1">
                设备类型：
            </div>
            <div class="flex" style="flex:0 0 30%" v-if="$route.query.type==1">
                <el-select placeholder="片区" v-model="a" @change="getList()" style="width:100%">
                    <el-option label="全部" value=""></el-option>
                    <el-option v-for="item in ['11']" :key="item.value" :label="item.name" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="flex" style="flex:0 0 20%" v-if="$route.query.type==2">
                点位类型：
            </div>
            <div class="flex" style="flex:0 0 30%" v-if="$route.query.type==2">
                <el-select placeholder="片区" v-model="a" @change="getList()" style="width:100%">
                    <el-option label="全部" value=""></el-option>
                    <el-option v-for="item in ['11']" :key="item.value" :label="item.name" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="flex" style="flex:0 0 20%" v-if="$route.query.type==2">
                点位：
            </div>
            <div class="flex" style="flex:0 0 30%" v-if="$route.query.type==2">
                <el-select placeholder="片区" v-model="a" @change="getList()" style="width:100%">
                    <el-option label="全部" value=""></el-option>
                    <el-option v-for="item in ['11']" :key="item.value" :label="item.name" :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="cx-list">
            <ul>
                <li v-if="equipList.length==0">暂无设备信息</li>
                <li style="display:flex;flex-wrap: wrap" v-for="item in equipList" :key="item.value" @click="toDetails(item.equipId)">
                    <div>
                        设备名称：{{item.equipName}}
                    </div>
                    <div>
                        设备编号：{{item.equipId}}
                    </div>
                    <div style="flex:0 0 95%">
                        设备类型：{{item.equipSize}}
                    </div>
                    <div style="flex:0 0 5%">
                        <i class="iconfont icon-jiantou-copy" style="color:#409eff;"></i>
                    </div>
                    <div>
                        设备状态：{{item.equipStatus}}
                    </div>
                    <div>
                        安装片区：{{item.areaName}}
                    </div>
                    <div>
                        安装点位：{{item.siteName}}
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            equipList: [],
            a: '',
            equipName: ''
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        selectName() {
            this.getList()
        },
        toDetails(equipId) {
            this.$router.push({ path: 'details', query: { equipId: equipId } })
        },
        //获取列表
        getList() {
            this.$api.chaxun.selSiteEquips({
                siteId: this.$route.query.id,
                equipName: this.equipName
            }).then(res => {
                if (res.success) {
                    this.equipList = res.data
                }
            });
        },
        scanNfc() {
            window.NfcScanInterface.scanNfc()
        }
    }
}
</script>

<style>
</style>
